<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>问题详情</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="fly,layui,前端社区">
<meta name="description"
	content="">
<link rel="stylesheet" th:href="@{/res/layui/css/layui.css}">
<link rel="stylesheet" th:href="@{/res/css/global.css}">

	<!--header-->
	<link rel="stylesheet" type="text/css" th:href="@{/home/styles/bootstrap4/bootstrap.min.css}">
	<link th:href="@{/home/plugins/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" th:href="@{/home/plugins/OwlCarousel2-2.2.1/owl.carousel.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/home/plugins/OwlCarousel2-2.2.1/owl.theme.default.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/home/plugins/OwlCarousel2-2.2.1/animate.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/home/plugins/jquery.mb.YTPlayer-3.1.12/jquery.mb.YTPlayer.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/home/styles/main_styles.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/home/styles/responsive.css}">

	<!--共有样式-->
	<link rel="stylesheet" th:href="@{/shop/assets/css/ql_index.css}">
	<link rel="stylesheet" th:href="@{/shop/assets/css/layer.css}">
	<script type="text/javascript" th:src="@{/shop/js/jquery-1.11.3.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/layer.js}"></script>
	<script type="text/javascript" th:src="@{js/jquery-1.9.0.min.js}"></script>
	<script type="text/javascript" src="js/move-top.js"></script>
	<script type="text/javascript" src="js/easing.js"></script>
	<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>



	<!--评论-->
	<link rel="stylesheet" th:href="@{/comment/css/style.css}">
	<link rel="stylesheet" th:href="@{/comment/css/comment.css}">


<script th:src="@{/res/layui/layui.js}"></script>
<script th:src="@{/res/js/jquery.js}"></script>
<style type="text/css" rel="stylesheet">
form {
	margin: 0;
}

.editor {
	margin-top: 5px;
	margin-bottom: 5px;
}
</style>

</head>
<body>
<header class="header">
	<div class="container">
		<div class="row">
			<div class="col">
				<div class="header_content d-flex flex-row align-items-center justify-content-start">
					<div class="logo"><a th:href="@{/m}">EDU</a></div>					<nav class="main_nav">
						<ul>
							<li class="active"><a th:href="@{/queryByName}">问答首页</a></li>
							<li><a th:href="@{/addquery}">悬赏问题</a></li>
							<li><a th:href="@{/queryhomepage}">未解决</a></li>
							<!--<li><a th:href="@{/queryhomepage}">光荣榜</a></li>-->
							<li><a th:href="@{/queryhomepage}">C币充值</a></li>
						</ul>
					</nav>
					<div class="search_container ml-auto">
						<form action="#">
							<input type="search" class="header_search_input" required="required" placeholder="Type to Search...">
							<img class="header_search_icon" th:src="@{/home/images/search.png}" alt="">
						</form>
						&nbsp;&nbsp;<a th:href="@{/login}">登录</a>&nbsp;|&nbsp;<a th:href="@{/register}">注册</a>					</div>
					<div class="hamburger ml-auto menu_mm">
						<i class="fa fa-bars trans_200 menu_mm" aria-hidden="true"></i>
					</div>
				</div>
			</div>
		</div>
	</div>
</header>
</div>
	<div class="main layui-clear">
		<div class="wrap">
			<div class="content detail">
				<div class="fly-panel detail-box">
					<h1 th:text="${query.querytitle}">帖子标题</h1>
					<div class="detail-about">
						<a class="jie-user" href=""> <img
							src="res/images/uer.jpg" alt="头像"> <cite th:text="${query.queryusername}"> 压缩
								<em th:text="${#dates.format(query.createtime, 'yyyy年MM月dd日 hh:mm:ss')}">2017-05-01发布</em> </cite> </a>
						<div class="detail-hits" data-id="{{rows.id}}">
							 <span>点击量：<em th:text="${query.broswer}">ss</em></span>
							<span>标签：<em th:text="${query.tag}">ddd</em></span>
							<span class="layui-btn layui-btn-mini jie-admin" type="collect" data-type="add">
								<a  href="javascript:void(0);" th:onclick="'javascript:getSC2('+${query.id }+')'">收藏</a> </span>
						</div>
					</div>
					<div class="detail-body photos" style="margin-bottom: 20px;">
						<div id="chen1" th:utext="${query.querydetail}">帖子内容</div>
					</div>
				</div>
				<div class="fly-panel detail-box" style="padding-top: 0;">
					<a name="comment"></a>
					<tbody>
					<tr th:each="answerList:${answerLists}">
						<div class="comment-show">
							<div class="comment-show-con clearfix">
								<div class="comment-show-con-img pull-left"><img th:src="@{/comment/images/header-img-comment_03.png}	" alt=""></div>
								<div class="comment-show-con-list pull-left clearfix">
									<div class="pl-text clearfix">
										<a href="#" class="comment-size-name" th:text="${answerList.username}">张三 : </a>
										<span class="my-pl-con" th:utext="${answerList.answer}">&nbsp;来啊 造作啊!</span>
									</div>
									<div class="date-dz">
										<span class="date-dz-left pull-left comment-time" th:text="${#dates.format(answerList.answerTime, 'yyyy年MM月dd日 HH:mm:ss')}">2017-5-2 11:11:39</span>
										<div class="date-dz-right pull-right comment-pl-block">
										<button th:onclick="'javascript:zan('+${answerList.id}+')'" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num" th:text="${answerList.likes}">666</i>)</button>
											<!--<button id="btn" th:onclick="'javascript:caina('+${answerList.id}+')'" class="date-dz-z1 pull-left">采纳</button>-->
										<script type="text/javascript">
										</script>
									</div>
									</div>
									<div class="hf-list-con"></div>
								</div>
							</div>
						</div>
						<script type="text/javascript" th:src="@{/comment/js/jquery-1.12.0.min.js}"></script>
						<script type="text/javascript" th:src="@{/comment/js/jquery.flexText.js}"></script>
						<!--textarea高度自适应-->
						<script type="text/javascript">
                            $(function () {
                                $('.content').flexText();
                            });
						</script>
						<!--textarea限制字数-->
						<script type="text/javascript">
                            function keyUP(t){
                                var len = $(t).val().length;
                                if(len > 139){
                                    $(t).val($(t).val().substring(0,140));
                                }
                            }
						</script>
						<!--点击评论创建评论条-->
						<script type="text/javascript">
                            $('.commentAll').on('click','.plBtn',function(){
                                var myDate = new Date();
                                //获取当前年
                                var year=myDate.getFullYear();
                                //获取当前月
                                var month=myDate.getMonth()+1;
                                //获取当前日
                                var date=myDate.getDate();
                                var h=myDate.getHours();       //获取当前小时数(0-23)
                                var m=myDate.getMinutes();     //获取当前分钟数(0-59)
                                if(m<10) m = '0' + m;
                                var s=myDate.getSeconds();
                                if(s<10) s = '0' + s;
                                var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
                                //获取输入内容
                                var oSize = $(this).siblings('.flex-text-wrap').find('.comment-input').val();
                                console.log(oSize);
                                //动态创建评论模块
                                oHtml = '<div class="comment-show-con clearfix"><div class="comment-show-con-img pull-left"><img th:src="@{/comment/images/header-img-comment_03.png}" alt=""></div> <div class="comment-show-con-list pull-left clearfix"><div class="pl-text clearfix"> <a href="#" class="comment-size-name">David Beckham : </a> <span class="my-pl-con">&nbsp;'+ oSize +'</span> </div> <div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+now+'</span> <div class="date-dz-right pull-right comment-pl-block"><a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a> </div> </div><div class="hf-list-con"></div></div> </div>';
                                if(oSize.replace(/(^\s*)|(\s*$)/g, "") != ''){
                                    $(this).parents('.reviewArea ').siblings('.comment-show').prepend(oHtml);
                                    $(this).siblings('.flex-text-wrap').find('.comment-input').prop('value','').siblings('pre').find('span').text('');
                                }
                            });
						</script>
						<!--点击回复动态创建回复块-->
						<script type="text/javascript">
                            $('.comment-show').on('click','.pl-hf',function(){
                                //获取回复人的名字
                                var fhName = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
                                //回复@
                                var fhN = '回复@'+fhName;
                                //var oInput = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.hf-con');
                                var fhHtml = '<div class="hf-con pull-left"> <textarea class="content comment-input hf-input" placeholder="" onkeyup="keyUP(this)"></textarea> <a href="javascript:;" class="hf-pl">评论</a></div>';
                                //显示回复
                                if($(this).is('.hf-con-block')){
                                    $(this).parents('.date-dz-right').parents('.date-dz').append(fhHtml);
                                    $(this).removeClass('hf-con-block');
                                    $('.content').flexText();
                                    $(this).parents('.date-dz-right').siblings('.hf-con').find('.pre').css('padding','6px 15px');
                                    //console.log($(this).parents('.date-dz-right').siblings('.hf-con').find('.pre'))
                                    //input框自动聚焦
                                    $(this).parents('.date-dz-right').siblings('.hf-con').find('.hf-input').val('').focus().val(fhN);
                                }else {
                                    $(this).addClass('hf-con-block');
                                    $(this).parents('.date-dz-right').siblings('.hf-con').remove();
                                }
                            });
						</script>
						<!--评论回复块创建-->
						<script type="text/javascript">
                            $('.comment-show').on('click','.hf-pl',function(){
                                var oThis = $(this);
                                var myDate = new Date();
                                //获取当前年
                                var year=myDate.getFullYear();
                                //获取当前月
                                var month=myDate.getMonth()+1;
                                //获取当前日
                                var date=myDate.getDate();
                                var h=myDate.getHours();       //获取当前小时数(0-23)
                                var m=myDate.getMinutes();     //获取当前分钟数(0-59)
                                if(m<10) m = '0' + m;
                                var s=myDate.getSeconds();
                                if(s<10) s = '0' + s;
                                var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
                                //获取输入内容
                                var oHfVal = $(this).siblings('.flex-text-wrap').find('.hf-input').val();
                                console.log(oHfVal)
                                var oHfName = $(this).parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
                                var oAllVal = '回复@'+oHfName;
                                if(oHfVal.replace(/^ +| +$/g,'') == '' || oHfVal == oAllVal){

                                }else {
                                    $.getJSON("json/pl.json",function(data){
                                        var oAt = '';
                                        var oHf = '';
                                        $.each(data,function(n,v){
                                            delete v.hfContent;
                                            delete v.atName;
                                            var arr;
                                            var ohfNameArr;
                                            if(oHfVal.indexOf("@") == -1){
                                                data['atName'] = '';
                                                data['hfContent'] = oHfVal;
                                            }else {
                                                arr = oHfVal.split(':');
                                                ohfNameArr = arr[0].split('@');
                                                data['hfContent'] = arr[1];
                                                data['atName'] = ohfNameArr[1];
                                            }

                                            if(data.atName == ''){
                                                oAt = data.hfContent;
                                            }else {
                                                oAt = '回复<a href="#" class="atName">@'+data.atName+'</a> : '+data.hfContent;
                                            }
                                            oHf = data.hfName;
                                        });

                                        var oHtml = '<div class="all-pl-con"><div class="pl-text hfpl-text clearfix"><a href="#" class="comment-size-name">我的名字 : </a><span class="my-pl-con">'+oAt+'</span></div><div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+now+'</span> <div class="date-dz-right pull-right comment-pl-block"> <a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a> </div> </div></div>';
                                        oThis.parents('.hf-con').parents('.comment-show-con-list').find('.hf-list-con').css('display','block').prepend(oHtml) && oThis.parents('.hf-con').siblings('.date-dz-right').find('.pl-hf').addClass('hf-con-block') && oThis.parents('.hf-con').remove();
                                    });
                                }
                            });
						</script>
						<!--删除评论块-->
						<script type="text/javascript">
                            $('.commentAll').on('click','.removeBlock',function(){
                                var oT = $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con');
                                if(oT.siblings('.all-pl-con').length >= 1){
                                    oT.remove();
                                }else {
                                    $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con').parents('.hf-list-con').css('display','none')
                                    oT.remove();
                                }
                                $(this).parents('.date-dz-right').parents('.date-dz').parents('.comment-show-con-list').parents('.comment-show-con').remove();

                            })
						</script>
						<!--点赞-->
						<script type="text/javascript">
							function zan(id){
							    console.log(id)
                                var url='/edu/zan?id='+id;
                                var sta
                                $.ajax({
                                    async:false,
                                    type: "get",
                                    url:url,
                                    dataType:"json",
                                    success:function (data) {
                                        sta=data.status;
                                    }
                                });
                                    $('.comment-show').on('click','.date-dz-z',function zans(){
                                    var zNum = $(this).find('.z-num').html();
                                    if($(this).is('.date-dz-z-click')){
                                        zNum--;
                                        $(this).removeClass('date-dz-z-click red');
                                        $(this).find('.z-num').html(zNum);
                                                                 $(this).find('.date-dz-z-click-red').removeClass('red');
                                }else {
                                    zNum++;
                                    $(this).addClass('date-dz-z-click');
                                    $(this).find('.z-num').html(zNum);
                                    $(this).find('.date-dz-z-click-red').addClass('red');
                                        $("button").attr("disabled","disabled");
                                }
                                console.log(id)
                                });
							}
						</script>
<script type="text/javascript">
    //采纳
    function caina(id) {
        console.log(id)
        var url = '/edu/caina?id=' + id;
        var sta
        $.ajax({
            async: false,
            type: "get",
            url: url,
            dataType: "json",
            success: function (data) {
                sta = data.status;
            }
        });
        var oBtn=document.getElementById('btn');
        oBtn.onclick=function() {
            return false;
        }
    }
</script>
					</tr>
					</tbody>
					<form th:action="@{/addanswer}" method="post">
					<span id="toName">@ 压缩(楼主)</span>
						<div id="mainContent">
					<div id="editor">
						<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
					</div>
					<input type="hidden" id="text1" name="answer"/>
							<div id="pang"></div>
					<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
							<script type="text/javascript" th:src="@{/js/wangEditor.min.js}"></script>
							<script th:inline="javascript">
                                var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
                                var E = window.wangEditor
                                var editor = new E('#editor')
                                editor.customConfig.uploadImgShowBase64=true
                                editor.create()
                                function getContent(){
                                    var text = editor.txt.html();
                                    document.getElementById("text1").value = text;
                                }
							</script>
						</div>
						<input type="hidden" id="queryId" name="queryId" th:value="${query.id}" />
						<div class="layui-form-item">
							<input type="submit" value="提交答案" class="layui-btn" lay-filter="*" onclick="getContent()" lay-submit></input>
						</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div class="edge">
			<dl class="fly-panel fly-list-one">
				<dt class="fly-panel-title">最近热帖</dt>
				<dd>
					<a href="">使用 layui 秒搭后台大布局（基本结构）</a> <span><i
						class="iconfont">&#xe60b;</i> 6087</span>
				</dd>
				<dd>
					<a href="">Java实现LayIM后端的核心代码</a> <span><i class="iconfont">&#xe60b;</i>
						767</span>
				</dd>
				<dd>
					<a href="">使用 layui 秒搭后台大布局（基本结构）</a> <span><i
						class="iconfont">&#xe60b;</i> 6087</span>
				</dd>
				<dd>
					<a href="">Java实现LayIM后端的核心代码</a> <span><i class="iconfont">&#xe60b;</i>
						767</span>
				</dd>
				<dd>
					<a href="">使用 layui 秒搭后台大布局（基本结构）</a> <span><i
						class="iconfont">&#xe60b;</i> 6087</span>
				</dd>
				<dd>
					<a href="">Java实现LayIM后端的核心代码</a> <span><i class="iconfont">&#xe60b;</i>
						767</span>
				</dd>
				<dd>
					<a href="">使用 layui 秒搭后台大布局（基本结构）</a> <span><i
						class="iconfont">&#xe60b;</i> 6087</span>
				</dd>
				<dd>
					<a href="">Java实现LayIM后端的核心代码</a> <span><i class="iconfont">&#xe60b;</i>
						767</span>
				</dd>
			</dl>

			<dl class="fly-panel fly-list-one">
				<dt class="fly-panel-title">近期热议</dt>
				<dd>
					<a href="">使用 layui 秒搭后台大布局之基本结构</a> <span><i
						class="iconfont">&#xe60c;</i> 96</span>
				</dd>
				<dd>
					<a href="">使用 layui 秒搭后台大布局之基本结构</a> <span><i
						class="iconfont">&#xe60c;</i> 96</span>
				</dd>
				<dd>
					<a href="">使用 layui 秒搭后台大布局之基本结构</a> <span><i
						class="iconfont">&#xe60c;</i> 96</span>
				</dd>
				<dd>
					<a href="">使用 layui 秒搭后台大布局之基本结构</a> <span><i
						class="iconfont">&#xe60c;</i> 96</span>
				</dd>
				<dd>
					<a href="">使用 layui 秒搭后台大布局之基本结构</a> <span><i
						class="iconfont">&#xe60c;</i> 96</span>
				</dd>
				<dd>
					<a href="">使用 layui 秒搭后台大布局之基本结构</a> <span><i
						class="iconfont">&#xe60c;</i> 96</span>
				</dd>
				<dd>
					<a href="">使用 layui 秒搭后台大布局之基本结构</a> <span><i
						class="iconfont">&#xe60c;</i> 96</span>
				</dd>
				<dd>
					<a href="">使用 layui 秒搭后台大布局之基本结构</a> <span><i
						class="iconfont">&#xe60c;</i> 96</span>
				</dd>
			</dl>
		</div>
	</div>
 <script type="text/javascript" charset="utf-8" src="res/js/kindeditor.js"></script>
  <script type="text/javascript">
    KE.show({
        id : 'L_content',
		resizeMode : 1,
        items : [
        'fontname', 'fontsize', 'textcolor', 'bgcolor', 'bold', 'italic', 'underline',
        'removeformat', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
        'insertunorderedlist', 'emoticons', 'image', 'link']
    });
  </script>
<script>
    function getSC2(obj) {
        // console.log(obj)
        axios.get('/edu/collectquery?id=' + obj).then(function (res) {
            if (res.data == '1') {
                layer.msg('已收藏');
            }
        });
    }
</script>
</body>
</html>